<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.form.js"></script>
		<!--<script charset="utf-8" src="../kindeditor/kindeditor.js"></script>
		<script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>-->
	</head>

	<body>
		<div class="layui-container">

			<div class="layui-row">
				<div id="app">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>修改实验</legend>
					</fieldset>
					<form enctype="multipart/form-data" id="fm" class="layui-form">
						<div class="layui-tab">

							<ul class="layui-tab-title" style="margin-top: 20px;">
								<li class="layui-this">基本信息</li>
								<li>预习资料</li>
								<li>实验内容</li>
							</ul>

							<div class="layui-tab-content">

								<div id="set1" class="layui-tab-item layui-show" style="margin-top: 10px;">
									<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
										<legend>基本信息</legend>
									</fieldset>
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">实验名</label>
											<div class="layui-input-inline">
												<input type="text" name="expId" class="layui-input" :value="expshow.experiment.expId" style="display: none" title="实验名">
												<input type="text" name="expName" class="layui-input" :value="expshow.experiment.expName" title="实验名">
											</div>
										</div>
									</div>

									<div class="layui-form-item">
										<label class="layui-form-label">课程名</label>
										<div class="layui-input-inline">
											<select name="couId" lay-verify="required" lay-search="" title="课程名">
												<!--<option value=""></option>-->
												<template v-for="course in courses">
													<template v-if="course.couId==expshow.course.couId">
														<option :value="course.couId" selected="selected">{{expshow.course.couName}}</option>
													</template>
													<template v-else="course.couId!=expshow.coursecouId">
														<option :value="course.couId">{{course.couName}}</option>
													</template>

												</template>
											</select>
										</div>
									</div>

									<!--	<div class="layui-input-block">
										<button class="layui-btn" type="button" @click="addExp()" lay-filter="">立即提交</button>
										<button type="reset" class="layui-btn layui-btn-primary">重置</button>
									</div>
									-->
								</div>

								<div id="set2" class="layui-tab-item" style="margin-top: 10px;">
									<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
										<legend>预习资料</legend>
									</fieldset>
									<div class="layui-upload">
										<input type="file" id="matUrl" name="matUrl" style="display: none" enctype="multipart/form-data" multiple @change="uploadmat()" onchange="loadFile(this)">
										<button type="button" class="layui-btn layui-btn-normal" id="testList" @click="uploadfalsemat()">选择多文件</button>
										<input type="text" style="display: none;" name="matOldName" :value="matOldName"></button>
										<div class="layui-upload-list">
											<table class="layui-table">
												<thead>
													<tr>
														<th>文件名</th>
														<!--<th>文件大小</th>-->
														<th>状态</th>
														<!--<th>操作</th>-->
													</tr>
												</thead>
												<tbody id="demomat">
													<tr v-for="material in expshow.material">
														<td>{{material.oldName}}</td>
														<!--<td>material.oldName</td>-->
														<td>已上传</td>
													</tr>
												</tbody>
											</table>
										</div>
										<!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
									</div>
								</div>
								<div id="set3" class="layui-tab-item" style="margin-top: 10px;">

									<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
										<legend>只允许上传一份实验内容！</legend>
									</fieldset>
									<div class="layui-upload-drag" id="" @click="uploadfalseContent()">
										<i class="layui-icon"></i>
										<p>
											点击上传
										</p>

									</div>
									<input type="text" id="contentName" name="contentName" :value="contentName" style="display: none">
									<input type="file" id="expContent" name="expContent" style="display: none" enctype="multipart/form-data" @change="uploadcontent()" onchange="loadFile(this)">
									<div class="layui-upload-list">
										<table class="layui-table">
											<thead>
												<tr>
													<th>文件名</th>
													<!--<th>文件大小</th>-->
													<th>状态</th>
												</tr>
											</thead>
											<tbody id="democontent">
												<td>{{expshow.experiment.oldName}}</td>
												<td>已上传</td>
											</tbody>
										</table>
									</div>

									 <input type="text" id="uid" name="uid" style="display: none" :value="getUid()" >

								</div>
								<div class="layui-input-block " style="margin-top: 60px;">
									<button class="layui-btn layui-col-lg-offset4" type="button" @click="updateExp()" lay-filter="">立即提交</button>
									<button type="reset" class="layui-btn layui-btn-primary layui-col-lg-offset5">重置</button>
								</div>
							</div>
					</form>
					</div>
				</div>
			</div>
			<script src="../../layui.js" charset="utf-8"></script>
			<script src="../../js/jquery.cookie.js"></script>
			<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
			<script>
				//上传文件限制类型和大小
				function loadFile(office) {
					var filePath = office.value;
					var fileExt = filePath.substring(filePath.lastIndexOf("."))
						.toLowerCase();

					
					if((office.files[0].size / 1024).toFixed(0) > 18432) {
						alert("上传文件需小于18M！");
						office.value = "";
						return;

					}

					if(office.files && office.files[0]) {
						//               alert(office);
						//                alert(office.files[0])
						//alert('你选择的文件大小' + (office.files[0].size / 1024).toFixed(0) + "kb");
						//                var xx = office.files[0];
						//                for (var i in xx) {
						//                    alert(xx[i])
						//                }
					} else {
						office.select();
						var url = document.selection.createRange().text;
						try {
							var fso = new ActiveXObject("Scripting.FileSystemObject");
						} catch(e) {
							alert('如果你用的是ie8以下 请将安全级别调低！');
						}
						//alert("文件大小为：" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb");
					}
				}
				$.ajax({
					type: "get",
					url: "http://localhost:8080/teacher/experiment/nothing.do",
					async: false,
					dataType: "json",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						//alert(data.info);
						if(data.info == '404') {
							window.location.href = "../login/teacherlogin.html";
						}
					}
				});

				function GetRequest() {
					var url = location.search; //获取url中"?"符后的字串
					var theRequest = new Object();
					if(url.indexOf("?") != -1) {
						var str = url.substr(1);
						strs = str.split("&");
						for(var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
						}
					}
					return theRequest;
				}
				var Request = new Object();
				Request = GetRequest(); //接收②方法得来的数组						
				expId = Request["expId"];
				var classes;
				var courses;
				$.ajax({
					"url": "http://localhost:8080/teacher/class/list.do",
					"async": false,
					"dataType": "json",
					"type": "get",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						classes = data;
					}
				});
				$.ajax({
					"url": "http://localhost:8080/teacher/course/list.do",
					"async": false,
					"dataType": "json",
					"type": "get",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						courses = data;
					}
				});
				var expshow;
				$.ajax({
					type: "get",
					url: "http://localhost:8080/teacher/experiment/getExp.do?expId=" + expId,
					async: false,
					dataType: "json",
					type: "get",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						expshow = data;
					}
				}); //console.log(classes);
				var vue = new Vue({
					el: "#app",
					data: {
						courses: courses,
						classes: classes,
						matlength: 0,
						contentlength: 0,
						expshow: expshow,
						contentName: expshow.experiment.expContent,

					},
					computed: {
						matOldName: function() {
							var materialName = "";
							for(var i = 0; i < this.expshow.material.length; i++) {
								materialName += this.expshow.material[i].matUrl;
								if(i != this.expshow.material.length - 1) {
									materialName += "?";
								}

							}
							console.log(materialName);
							return materialName;
						}

					},
					methods: {
						uploadfalsemat: function() {
							$("#matUrl").click();
						},
						uploadmat: function() {
							$("#demomat").empty();
							this.matlength = $("#matUrl")[0].files.length;
							for(var i = 0; i < $("#matUrl")[0].files.length; i++) {
								/*var fileReader = new FileReader();*/
								var myfile = document.getElementById('matUrl');
								var domBody = document.getElementById("demomat");
								/*fileReader.onload = function(e) {*/
								var oTR_1 = document.createElement("tr");
								domBody.appendChild(oTR_1);
								//console.log(myfile.files[i].name);

								var oTD_11 = document.createElement("td");
								oTD_11.appendChild(document.createTextNode(myfile.files[i].name));
								oTR_1.appendChild(oTD_11);
								/*var oTD_21 = document.createElement("td");
								oTR_1.appendChild(oTD_21);
								oTD_21.appendChild(document.createTextNode(myfile.files[i].size + "kb"));*/
								var oTD_31 = document.createElement("td");
								oTR_1.appendChild(oTD_31);
								oTD_31.appendChild(document.createTextNode("等待上传"));
							}
						},
						uploadfalseContent: function() {
							//alert("123");
							$("#expContent").click();
						},
						uploadcontent: function() {
							//alert("456");						
							$("#democontent").empty();
							this.contentlength = $("#expContent")[0].files.length;
							for(var i = 0; i < $("#expContent")[0].files.length; i++) {

								var myfile = document.getElementById('expContent');
								var domBody = document.getElementById("democontent");

								var oTR_1 = document.createElement("tr");
								domBody.appendChild(oTR_1);

								var oTD_11 = document.createElement("td");
								oTD_11.appendChild(document.createTextNode(myfile.files[i].name));
								oTR_1.appendChild(oTD_11);
								/*var oTD_21 = document.createElement("td");
								oTR_1.appendChild(oTD_21);
								oTD_21.appendChild(document.createTextNode(myfile.files[i].size + "kb"));*/
								var oTD_31 = document.createElement("td");
								oTR_1.appendChild(oTD_31);
								oTD_31.appendChild(document.createTextNode("等待上传"));
							}
						},						
						getUid:function(){
							//alert($.cookie("uid"));
							return $.cookie("uid");							
						},
						updateExp: function() {
							var form = new FormData(document.getElementById("fm"));
							var myform = document.getElementById("fm");
							for(var i = 0; i < myform.length; i++) { //循环form表单
								if(myform.elements[i].value == "" && myform.elements[i].tagName == "INPUT"&&myform.elements[i].name!="matUrl"&&myform.elements[i].name!="expContent") { //判断每一个元素是否为空
									console.log(myform.elements[i].name);
									layer.msg(myform.elements[i].title + "不能为空！", {
										time: 2000,
										btn: ["关闭"]
									});
									myform.elements[i].focus(); //元素获得焦点
									return;
								}
							}
							$.ajax({
								url: "http://localhost:8080/teacher/experiment/update.do",
								type: "post",
								data: form,
								dataType: 'json',
								processData: false,
								contentType: false,
								success: function(data) {
									//window.clearInterval(timer);
									//console.log("over..");
									layer.msg("实验添加成功");
									window.location.href = "expList.html";
								},
								error: function(e) {
									alert("错误！！");
									//window.clearInterval(timer);
								}
							});

							
						}

					}
				});
				layui.use(['form', 'layedit', 'laydate'], function() {
					var form = layui.form,
						layer = layui.layer,
						layedit = layui.layedit,
						laydate = layui.laydate;

					//日期
					laydate.render({
						elem: '#date'
					});
					laydate.render({
						elem: '#date1'
					});

					//创建一个编辑器
					var editIndex = layedit.build('LAY_demo_editor');

				});
				layui.use('element', function() {
					var $ = layui.jquery,
						element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

					//触发事件
					var active = {
						tabChange: function() {
							//切换到指定Tab项
							element.tabChange('demo', '22'); //切换到：用户管理
						}
					};

					$('.site-demo-active').on('click', function() {
						var othis = $(this),
							type = othis.data('type');
						active[type] ? active[type].call(this, othis) : '';
					});

				});
				layui.use('laydate', function() {
					var laydate = layui.laydate;

					//日期时间选择器
					laydate.render({
						elem: '#test5',
						type: 'datetime'
					});
					//日期时间选择器
					laydate.render({
						elem: '#test6',
						type: 'datetime'
					});

					

				});
			</script>

	</body>

</html>